/*
 * @Author: zhumeng@sensorsdata.cn
 * @Date: 2024-04-02 20:11:34
 * @LastEditTime: 2024-04-03 16:32:27
 * @Description:
 */

import React from 'react'
import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Avatar,
  Button,
  Tab,
  Tabs
} from '@nextui-org/react'

const cardConfig = {
  alipay: {
    logo: '/img/alipay.png',
    name: '支付宝'
  },
  wechat: {
    logo: '/img/wechat.png',
    name: '微信',
    avatar: {
      // color: 'success'
    }
  }
}
export default function MoneyCard(props) {
  const { type } = props
  const { logo, name, avatar = {} } = cardConfig[type] || cardConfig.alipay
  const [isFollowed, setIsFollowed] = React.useState(false)
  return (
    <Card className="max-w-[340px]">
      <CardHeader className="justify-between">
        <div className="flex gap-5">
          <Avatar {...avatar} isBordered radius="full" size="md" src={logo} />
          <div className="flex flex-col gap-1 items-start justify-center">
            <h4 className="text-small font-semibold leading-none text-default-600">
              {name}
            </h4>
            <h5 className="text-small tracking-tight text-default-400">
              三月份
            </h5>
          </div>
        </div>
        <Button
          className={
            isFollowed
              ? 'bg-transparent text-foreground border-default-200'
              : ''
          }
          color="primary"
          radius="full"
          size="sm"
          variant={isFollowed ? 'bordered' : 'solid'}
          onPress={() => setIsFollowed(!isFollowed)}
        >
          {isFollowed ? 'Unfollow' : 'Follow'}
        </Button>
      </CardHeader>
      <CardBody className="px-3 py-0 text-small text-default-400">
        <p>
          Frontend developer and UI/UX enthusiast. Join me on this coding
          adventure!
        </p>

        <div className="flex w-full flex-col">
          <Tabs aria-label="Options" color="primary" variant="bordered">
            <Tab
              key="photos"
              title={
                <div className="flex items-center space-x-2">
                  <img src={cardConfig.alipay.logo} width={24} height={24} />
                  <span>Photos</span>
                </div>
              }
            >
              xxxxx
            </Tab>
            <Tab
              key="music"
              title={
                <div className="flex items-center space-x-2">
                  <img src={cardConfig.wechat.logo} width={24} height={24} />
                  <span>Music</span>
                </div>
              }
            >
              ddd
            </Tab>
          </Tabs>
        </div>
        <span className="pt-2">
          #FrontendWithZoey
          <span className="py-2" aria-label="computer" role="img">
            💻
          </span>
        </span>
      </CardBody>
      <CardFooter className="gap-3">
        <div className="flex gap-1">
          <p className="font-semibold text-default-400 text-small">4</p>
          <p className=" text-default-400 text-small">Following</p>
        </div>
        <div className="flex gap-1">
          <p className="font-semibold text-default-400 text-small">97.1K</p>
          <p className="text-default-400 text-small">Followers</p>
        </div>
      </CardFooter>
    </Card>
  )
}
